<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 公告管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div style="padding-bottom: 10px">
        <el-input
            v-model="query.name"
            placeholder="标题"
            style="width: 300px; margin-right: 10px"
            clearable
        ></el-input>
        <el-select
            v-model="query.cid"
            filterable
            placeholder="选择查看的类别"
            @focus="getCate()"
        >
          <el-option
              v-for="item in cateList"
              :key="item.sid"
              :label="item.name"
              :value="item.sid"
              :disabled="item.sid==4 ? true:false"
          >
          </el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="load"
        >搜索
        </el-button
        >
        <el-button
            type="primary"
            icon="el-icon-circle-plus-outline"
            @click="handleAdd"
        >新增
        </el-button
        >
        <!--        <el-button-->
        <!--            type="primary"-->
        <!--            icon="el-icon-circle-plus-outline"-->
        <!--            @click="handleSchoolAdd"-->
        <!--        >新增校园风光-->
        <!--        </el-button-->
        <!--        >-->
      </div>
      <div>
        <el-container>
          <el-aside width="100%" class="table1">
            <el-table :data="tableData">
              <el-table-column prop="title" label="名称"></el-table-column>
              <el-table-column prop="author" label="作者"></el-table-column>
              <!--               <el-table-column prop="createUser" label="创建人"></el-table-column> -->
              <el-table-column prop="name" label="类别"></el-table-column>
              <el-table-column prop="createTime" label="创建时间"></el-table-column>
              <el-table-column width="300">
                <template #default="scope">
                  <el-button @click="look(scope.row.content)" type="success">查看</el-button>
                  <el-button @click="handleEdit(scope.row)" type="primary">编辑</el-button>
                  <el-button @click="del(scope.row.sid)" type="danger">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination
                  :currentPage="pageNum"
                  :page-sizes="[5, 10, 20]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
              >
              </el-pagination>
            </div>
          </el-aside>
          <!--          <el-main>-->
          <!--            <div class="clits">-->
          <!--              <div><i class="el-icon-s-data"></i>校园风光</div>-->
          <!--            </div>-->
          <!--            <el-table-->
          <!--                :data="tableDataCidFour"-->
          <!--                border-->
          <!--                class="table"-->
          <!--                ref="multipleTable"-->
          <!--                header-cell-class-name="table-header"-->
          <!--            >-->
          <!--              <el-table-column-->
          <!--                  :show-overflow-tooltip="true"-->
          <!--                  :prop="item.prop"-->
          <!--                  :label="item.label"-->
          <!--                  v-for="item in props"-->
          <!--                  :key="item.prop"-->
          <!--              >-->
          <!--              </el-table-column>-->
          <!--              <el-table-column label="风光样例" align="center">-->
          <!--                <template #default="scope">-->
          <!--                  <p v-if="scope.row.content!=null">-->
          <!--                       <span v-for="(item,index) in scope.row.content.split(',')" :key="index">-->
          <!--                     <el-image style="display: inline-flex;padding: 10px;width: 30%;height: 10%"-->
          <!--                               class="table-td-thumb"-->
          <!--                               :src="item"-->
          <!--                               :preview-src-list="[item]"-->
          <!--                     ></el-image>-->
          <!--        </span>-->
          <!--                  </p>-->

          <!--                </template>-->
          <!--              </el-table-column>-->
          <!--              <el-table-column>-->
          <!--                <el-table-column-->
          <!--                    label="操作"-->
          <!--                    width="180"-->
          <!--                    align="center"-->
          <!--                    fixed="right"-->
          <!--                >-->
          <!--                  <template #default="scope">-->
          <!--                    <el-button-->
          <!--                        type="text"-->
          <!--                        icon="el-icon-edit"-->
          <!--                        @click="handleEditSchool(scope.row.sid)"-->
          <!--                    >编辑-->
          <!--                    </el-button>-->
          <!--                    <el-button-->
          <!--                        type="text"-->
          <!--                        icon="el-icon-delete"-->
          <!--                        class="red"-->
          <!--                        @click="handleDelete(scope.$index, scope.row.sid)"-->
          <!--                    >删除-->
          <!--                    </el-button-->
          <!--                    >-->
          <!--                  </template>-->
          <!--                </el-table-column>-->
          <!--              </el-table-column>-->
          <!--            </el-table>-->

          <!--          </el-main>-->
        </el-container>
      </div>
    </div>


    <div>
      <el-dialog title="信息" v-model="dialogVisible" width="50%">
        <el-form :model="entity" label-width="100px">
          <el-form-item label="名称">
            <el-input v-model="entity.title" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="分类" prop="cid">
            <el-select v-model="entity.cid" placeholder="请选择">
              <el-option
                  v-for="item in cateList"
                  :key="item.sid"
                  :label="item.name"
                  :value="item.sid"
                  :disabled="item.sid==4 ? true:false"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="作者">
            <el-input v-model="entity.author" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="内容">
            <div id="div1"></div>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>

    <div>
      <el-dialog title="内容" v-model="vis" width="50%">
        <el-card>
          <div v-html="content"></div>
        </el-card>
      </el-dialog>
    </div>
    <div>
      <!-- 校园分风光 -->
      <el-dialog
          title="校园风光"
          v-model="importVisible"
          width="40%"
          :before-close="handleClose">

        <div class="container">
          <div class="form-box">
            <el-form ref="formRef" :rules="rules" :model="fileForm" label-width="80px">
              <el-form-item label="类型" prop="goodsName">
                <el-input v-model="fileForm.typeName" aria-required="true" disabled style="color: #2d8cf0"></el-input>
              </el-form-item>
              <!--             :file-list="fileList"-->
              <el-form-item label="校园图片">
                <el-upload ref="pictureUpload" action="#" list-type="picture-card"
                           :limit="10" :on-exceed="handleExceed"
                           :auto-upload="false"
                           :file-list="fileList"

                           :on-change="handleFile">
                  <template #default>
                    <i class="el-icon-plus"></i>

                  </template>
                  <template #file="{ file }">
                    <div>
                      <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
                      <span class="el-upload-list__item-actions">
          <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
                    </div>
                  </template>
                </el-upload>

              </el-form-item>
              <el-form-item label="标题名" prop="title">
                <el-input v-model="fileForm.title" placeholder="标题名" aria-required="true">></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
                <!--            <el-button @click="onReset">重置</el-button>-->
              </el-form-item>
            </el-form>

          </div>
        </div>
      </el-dialog>
    </div>
  </div>


</template>

<!--<script setup>-->
<script>

import request from "@/utils/request";
import E from "wangeditor";
import {ref, nextTick, reactive} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import router from "../../router";

export default {
  methods: {
    //文件上传
    submitUpload() {
      this.$refs.upload.submit();
    },
    //文件数量控制
    handleExceed(files, fileList) {
      console.log(fileList)
      this.$message.warning(
          `The limit is 1, you selected ${
              files.length
          } files this time, add up to ${files.length + fileList.length} totally`
      );
    },
    //文件移除
    handleRemove(file) {
      let uploadFiles = this.$refs.pictureUpload.uploadFiles
      for (var i = 0; i < uploadFiles.length; i++) {
        if (uploadFiles[i]['url'] == file.url) {
          uploadFiles.splice(i, 1)
          this.fileList.splice(i, 1)
          console.log(this.fileList)
        }
      }
    },
  },
  setup() {
    const tableData = ref([])
    // const name = ref("")
    const pageNum = ref(1)
    const pageSize = ref(10)
    const total = ref(0)
    const dialogVisible = ref(false)
    const entity = ref({
      author: "",
      cid: "",
      content: "",
      releaseType: "",
      title: "",
    })
    const content = ref("")

    const vis = ref(false)
    let editor

    const query = reactive({
      name: "",
      cid: "",
      pageNum: 1,
      pageSize: 10,
    });
    const look = (c) => {
      content.value = c
      vis.value = true
    }
    const load = () => {
      request
          .get("/article/page", {
            params: query,
          }).then(res => {
        tableData.value = res.data.records
        total.value = res.data.total
      })
    }
    //下拉框
    // const options = ref([]);
    const cateList = ref([]);
    const getCate = () => {
      request.get("/cate").then((res) => {
        cateList.value = res.data;
      });
    };
    getCate()
    const handleAdd = () => {
      dialogVisible.value = true
      entity.value = {}

      nextTick(() => {
        // 关联弹窗里面的div，new一个 editor对象
        if (!editor) {
          editor = new E('#div1')

          // 配置 server 接口地址
          editor.config.uploadImgServer = 'http://localhost:9998/files/editor/upload'
          editor.config.uploadFileName = "file"  // 设置上传参数名称
          editor.create()
        }

        editor.txt.html("")

      })
    }
    const handleEdit = (row) => {
      entity.value = JSON.parse(JSON.stringify(row))
      dialogVisible.value = true

      nextTick(() => {
        // 关联弹窗里面的div，new一个 editor对象
        // 关联弹窗里面的div，new一个 editor对象
        if (!editor) {
          editor = new E('#div1')
          // 配置 server 接口地址
          editor.config.uploadImgServer = 'http://localhost:9998/files/editor/upload'
          editor.config.uploadFileName = "file"  // 设置上传参数名称
          editor.create()
        }

        editor.txt.html(row.content)
      })
    }
    const del = (sid) => {
      request.delete("/article/" + sid).then(res => {
        if (res.code === '0') {
          ElMessage.success("删除成功")
        } else {
          ElMessage.error(res.msg)
        }
        load()  // 删除之后重新加载表格的数据
      })
    }
    const save = () => {
      entity.value.content = editor.txt.html()
      console.log("jhsbfuhs")
      console.log(entity.value)
      console.log("jhsbfuhs")
      // entity.value.cid = "1"
      if (entity.value.sid) {  // 更新
        request.put("/article", entity.value).then(res => {
          console.log(res)
          if (res.code === '0') {
            ElMessage.success("更新成功")
          } else {
            ElMessage.error(res.msg)
          }
          load() // 刷新表格的数据
          dialogVisible.value = false  // 关闭弹窗
        })
      } else {  // 新增
        request.post("/article", entity.value).then(res => {
          if (res.code === null) {
            ElMessage.success("新增成功")
            dialogVisible.value = false  // 关闭弹窗
          } else {
            ElMessage.error(res.msg)
            dialogVisible.value = false  // 关闭弹窗
          }

          load() // 刷新表格的数据
          dialogVisible.value = false  // 关闭弹窗
        })
      }
    }
    const handleSizeChange = (pageSize) => {   // 改变当前每页的个数触发
      query.pageSize = pageSize
      load()
    }
    const handleCurrentChange = (pageNum) => {  // 改变当前页码触发
      query.pageNum = pageNum
      load()
    }
// 调用方法
    load()
    const props = [
      {label: "地点名", prop: "title"},
      // {label: "图片", prop: "content"},
      {label: "上传者", prop: "author"},
    ];
    const tableDataCidFour = ref([])
    const getListSchool = () => {
      request.get("/article/queryListSchool").then((res) => {
        tableDataCidFour.value = res.data
      })
    };
    // getListSchool();
//文件上传校园风光
    const handleSchoolAdd = () => {
      router.push("/admin/addSchoolpit");
      // importVisible.value = true
    }
// 提交 // 删除操作
    const handleDelete = (index, sid) => {
      // 二次确认删除
      ElMessageBox.confirm("确定要删除吗？", "提示", {
        type: "warning",
      })
          .then(() => {
            request.delete("/article/" + sid).then((res) => {
              if (res.data) {
                ElMessage.success("删除成功");
                tableData.value.splice(index, 1);
                load()
              } else {
                ElMessage.error("删除失败");
                load()
              }
            });
          })
          .catch(() => {
          });
    };
    const handleEditSchool = (sid) => {
      router.push({path: "/admin/addSchoolpit", query: {id: sid}});
      load()
    };

    return {
      tableData,
      // name,
      query,
      pageNum,
      pageSize, props,
      total,
      entity, content, cateList,
      vis, editor, dialogVisible, tableDataCidFour,
      look, handleEdit, handleCurrentChange, handleSizeChange, handleSchoolAdd,
      handleAdd, del, save, load, getCate, getListSchool, handleDelete, handleEditSchool,
    }
  }
}

</script>

<style scoped>
.clits {
  background: #3ca2e0;
  height: 50px;
  font-size: 25px;
  display: flex;
  align-items: center;
}

.clits div {
  text-align: left;
  color: white;
}

</style>
